<template>
  <div class="map-container">
    <van-cell
      :title="title"
      :border="border"
      :title-width="titleWidth"
      :required="required"
      :value-class="valueClass"
      @click="onSelectLocation"
      :value="addressText"
    >
    </van-cell>
  </div>
</template>

<script>
// import Vue from 'vue'
export default {
  props: {
    id: {
      required: true,
      type: String
    },
    label: {
      required: true,
      default: '字段名称'
    },
    // 选项数组
    value: {
      type: String,
      default: ''
    },
    // 默认选项
    latitude: {
      type: Number,
      default: 0
    },
    // 默认选项
    longitude: {
      type: Number,
      default: 0
    },
    placeholder: {
      type: String,
      default: '点击选取地点信息'
    },
    titleWidth: {
      type: String
    },
    valueClass: {
      type: String
    },
    required: Boolean,
    border: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      title: '',
      addressText: '',
      addressData: {},
      address: {},
      position: {}
    }
  },
  mounted () {
    if (this.latitude && this.longitude) {
      this.position = {
        latitude: this.latitude,
        longitude: this.longitude
      }
    }
    this.addressText = this.value ? this.value : this.placeholder
    this.title = this.label
  },

  watch: {
    addressData (v) {
      if (v) {
        let info = v.ad_info
        let rec = v.formatted_addresses.recommend
        let address = [
          info.nation !== '中国' ? info.nation : '',
          info.province,
          info.city,
          info.district
        ]
        this.addressText = address.join('')
        this.address = {
          nation: info.nation,
          province: info.province,
          city: info.city,
          district: info.district,
          address_detail: rec,
          nation_code: info.nation_code,
          area_code: info.adcode,
          lat: info.location.lat,
          lng: info.location.lng
        }
        this.notice()
      }
    }
  },

  onLoad (option) {
    console.log('_____________onLoad')
  },
  created () {},

  methods: {
    onSelectLocation () {
      wx.chooseLocation(
        Object.assign(
          {
            success: res => {
              // success
              console.log(res)
              this.getAddressDetail(res.latitude, res.longitude)
              this.departure = res.name
            },

            fail () {
              // fail
            },

            complete: function () {
              // complete
            }
          },
          this.position
        )
      )
    },
    getAddressDetail (latitude, longitude) {
      var locationString = latitude + ',' + longitude
      wx.request({
        url: 'https://apis.map.qq.com/ws/geocoder/v1/',
        data: {
          key: 'N75BZ-UTB3K-7GGJW-AVMIL-MDT36-RYFTQ',
          location: locationString
        },
        method: 'GET',
        success: res => {
          // 输出一下位置信息
          console.log(res)
          console.log(res.data.result)
          this.addressData = res.data.result
          // this.addressText = res.data.result.address
        }
      })
    },
    notice () {
      this.$emit('change', this.address)
    }
  }
}
</script>

<style lang="less">
.picker-container {
  
}
</style>